<template>
  <view class="all">
    <view v-if="!showAll && content.length > contentSlice">
      <text :class="contentSlice == 75 ? 'truncatedText0' : 'truncatedText1'"
        >{{ getFilterBrTagText(content).slice(0, contentSlice) }}...</text
      >
      <text
        :class="contentSlice == 75 ? 'moreBtn0' : 'moreBtn1'"
        @click="showAll = true"
        >查看全部</text
      >
    </view>
    <view v-else>
      <text :class="contentSlice == 75 ? 'truncatedText0' : 'truncatedText1'">{{
        getFilterBrTagText(content)
      }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: "暂无内容",
    },
    contentSlice: {
      type: Number,
      default: 75,
    },
  },
  data() {
    return {
      showAll: false,
    };
  },
  created(){
    //console.log("created",this.content,this.contentSlice);
  },
  onLoad(opt){
    //console.log("created",this.content,this.contentSlice);
  },
  methods:{
    getFilterBrTagText(content) {
      return content.replace(/<br>/g, "\n");;
    }
  }
};
</script>

<style>
.all {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 48rpx;
}
.truncatedText0 {
  font-size: 28rpx;
  color: #555555;
}
.moreBtn0 {
  margin-left: 8rpx;
  font-size: 26rpx;
  color: #f75a3e;
}
.truncatedText1 {
  font-size: 26rpx;
  color: #eee;
}
.moreBtn1 {
  font-size: 26rpx;
  color: #94a0b2;
}
</style>
